<template>

<div class="method">
    <input type="text" v-model="obj.first">
    <select v-model="obj.opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="obj.second">
    <input type="button" value="=">
    <input type="text" v-model="result">

    <h1>{{ deepObj.user.name }}</h1>
    <button @click="clickBtn">修改数据</button>

    <!-- 调用公共底部组件 -->
    <FooterCom/>
</div>

</template>

<script setup lang='ts'>
import { ref , reactive,computed,watch } from 'vue'
import FooterCom from '@/components/FooterCom.vue';
const obj=reactive({
    first:'',
    second:'',
    opt:'+'
})

const result=computed(():number=>{
    var sum;
    if (obj.first !=''&& obj.second !=''){
    sum= eval(obj.first+obj.opt+obj.second)
    }
    return sum
})


//计算属性:实现实时数据计算
//当计算方法中计算的响应式数据发生改变时，他会直接重新计算，默认初始化就会执行计算方法
// computed(()=>{

// })

//监听属性-默认时被动监听，数据改变了才会触发
//监听一个或多个响应数据，还可以监听路由的变化，以及深层次的数据结构监听
watch(obj,(newVal,oldVal)=>{
    console.log('obj-newVal',newVal);
    // console.log('obj-oldVal',oldVal);
})
//监听多个数据
// watch([()=>obj.first,()=>obj.second,()=>obj.opt],(values)=>{
// console.log(values);
// },{
//     immediate:true//初始化就会执行一次监听，默认是false
// })
const deepObj=reactive({
    user:{
        name:'关羽',
        sex:true
    }
})
//修改数据
function clickBtn(){
    deepObj.user.name='李四'
}
//深度监听
watch(()=>deepObj.user,(value)=>{
    console.log('deepObj:',value);
},{
    deep:true//默认是false，开启之后可以监听到多层次的数据变化
})

</script>
<style lang='less' scoped>

</style>